<h1 mat-dialog-title>{{'home.editCateList.title.prefix' | translate}}{{data.name}}{{'home.editCateList.title.last' | translate}}</h1>
<div mat-dialog-content>
    <form>
        <!-- bookCateListInput -->
        <mat-form-field fxFill style="font-size: 16px">
            <mat-label>
                {{'home.editCateList.label.prefix' | translate}}(<b>{{'home.editCateList.label.required' | translate}}</b>)
            </mat-label>
            <mat-chip-list #chipList aria-label="Book cate selection">
                <mat-chip
                    *ngFor="let cate of data.cateList"
                    [selectable]="selectable"
                    [removable]="removable"
                    (removed)="remove(cate)">
                    {{cate.name}}
                    <ion-icon matChipRemove *ngIf="removable" name="close-circle"></ion-icon>
                </mat-chip>
                <input
                    placeholder="{{'home.editCateList.input.placeholder' | translate}}"
                    #cateInput
                    [formControl]="cateListInputControl"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                    (matChipInputTokenEnd)="add($event)" />
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                <mat-option *ngFor="let cate of filteredCateList | async" [value]="cate.name">
                    {{cate.name}}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </form>
</div>
<div mat-dialog-actions>
    <button mat-button matDialogClose>{{'home.editCateList.actions.cancel' | translate}}</button>
    <button mat-button [disabled]="data.cateList.length === 0" [mat-dialog-close]="data">
        {{'home.editCateList.actions.modify' | translate}}
    </button>
</div>
